<style lang="scss" scoped>
  .van-tabbar-item__text{
    font-size: 1.3rem !important;
  }
</style>
<template>
  <van-tabbar
    v-model="active"
    :active-color="activeColor"
    :inactive-color="inactiveColor"
    title-class="fs-14"
    @change="tabChange"
  >
    <van-tabbar-item
      v-for="(item,index) in tabbar"
      :key="index"
      :icon="active === index ? item.activeIcon : item.inactiveIcon"
      >{{ item.text }}</van-tabbar-item
    >
    <!-- <van-tabbar-item v-for="item in tabbar" :key="item.id">
      <span>{{item.text}}</span>
      <template #icon="props">
        <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
      </template>
    </van-tabbar-item> -->
  </van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
  components: {
   [Tabbar.name]: Tabbar,
   [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
      activeColor: "#FF0000",
      inactiveColor: "#999",
      tabbar:[]
      // tabbar:[{
      //   id:0,
      //   activeIcon: "gift",
      //   inactiveIcon: "gift-o",
      //   text: "活动案例"
      // },{
      //   id:1,
      //   activeIcon: "send-gift",
      //   inactiveIcon: "send-gift-o",
      //   text: "活动管理"
      // },{
      //   id:2,
      //   activeIcon: "friends",
      //   inactiveIcon: "friends-o",
      //   text: "活动粉丝"
      // },{
      //   id:3,
      //   activeIcon: "manager",
      //   inactiveIcon: "manager-o",
      //   text: "个人中心"
      // }]
    }
  },
  mounted () {
    const _this = this;
    const mainColor = _this.$store.getters.getMainColor;
    const tabbar = _this.$store.getters.getTabbar;
    if(mainColor){
      _this.activeColor = mainColor;
    }else{
      //调用接口获取mainColor
    }
    if(tabbar.length > 0){
      _this.tabbar = tabbar;
      _this.initActive();
    }else{
      //调用接口获取tabbar
      _this.getTabbar()
    }

    
  },
  methods: {
    getTabbar() {
      const _this = this;
      let params = {
        pageNo: 1,
        pageSize: 10
      }
      _this.$request.getTabbar(params).then(res=>{
        _this.tabbar = JSON.parse(res.data.value.list)
        _this.activeColor = res.data.value.color
        _this.$store.commit('setTabbar', JSON.parse(res.data.value.list))
        _this.$store.commit('setMasterColor', res.data.value.color)
        _this.initActive();
      })
    },
    initActive() {
      const _this = this;
      //初始化active
      let params = window.location.hash;
      let hash = params.substr(2);
      switch(hash) {
        case 'case':
            _this.active = 0;
            document.title = _this.tabbar[_this.active].text
            break;
        case 'manage':
            _this.active = 1;
            document.title = _this.tabbar[_this.active].text
            break;
        case 'fans':
            _this.active = 2;
            document.title = _this.tabbar[_this.active].text
            break;
        case 'my':
            _this.active = 3;
            document.title = _this.tabbar[_this.active].text
            break;
        default:
            _this.active = 0;
      }
    },
    tabChange(key) {
      const _this = this;
      switch (key) {
        case 0:
          _this.$router.replace('/case');
          document.title = _this.tabbar[key].text
          break;
        case 1:
          _this.$router.replace('/manage');
          document.title = _this.tabbar[key].text
          break;
        case 2:
          _this.$router.replace('/fans');
          document.title = _this.tabbar[key].text
          break;
        case 3:
          _this.$router.replace('/my');
          document.title = _this.tabbar[key].text
          break;
        default:
          break;
      }
    }
  }
};
</script>
